<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>layout页面布局</title>
<!-- 引入easyui相关的资源文件 -->
	<link rel="stylesheet" type="text/css"
	 href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
	<script type="text/javascript"
	 src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
	<!-- 引入ztree资源文件 -->
	 <link rel="stylesheet"
	  href="${pageContext.request.contextPath}/js/ztree/zTreeStyle.css" type="text/css">
	<script type="text/javascript"
	 src="${pageContext.request.contextPath}/js/ztree/jquery.ztree.all-3.5.js"></script>
	<script>
		//创建zTree树
		var setting = {};
		//构造标准json数据作为子结点
		var zNodes = [{name:'结点1',children:[
		                                     {name:'结点11',children:[
		                                                             {name:'结点111'},
		                                                             {name:'结点112'}
		                                                             ]},
		                                     {name:'结点12'}
		                                     ]},
		              {name:'结点2'},
		              {name:'结点3'}
		              ];
		$(function(){
		 	//初始化树
		 	$.fn.zTree.init($("#myTree"), setting, zNodes);
	 	});
	</script>
</head>
<body class="easyui-layout">
	<div data-options="region:'north'" title="xxx管理系统" style="height:100px">北部区域</div>
	<div data-options="region:'south'" style="height:100px">南部区域</div>
	<div data-options="region:'west'" title="系统菜单" style="width:200px">
		<div class="easyui-accordion" data-options="fit:true">
			<div title="面板一" data-options="iconCls:'icon-cut'">
				<ul id="myTree" class="ztree"></ul>
			</div>
			<div title="面板二">
				<script type="text/javascript">
					function onClick(event, treeId, treeNode, clickFlag){
						var page=treeNode.page;
						if(page != undefined){
							//判断当前选项卡是否已经打开
							var ex = $("#tabs").tabs("exists",treeNode.name);
							if(ex){
								$("#tabs").tabs("select",treeNode.name);
							}else{
								$("#tabs").tabs("add",{
									iconCls:'icon-save',
									closable:true,
									title:'百度一下',
									content:'<iframe frameborder="0" height="100%" width="100%" src="'+page+'"></iframe>'
								});
							}
						}
					}
					var setting2 = {
							data : {
								simpleData : {
									enable : true	
							}
						},
						callback : {
							onClick : onClick
						}
					};
					//构造简单json数据创建子结点
					var zNodes2 = [
					               {id:1,pId:0,name:'父结点1--展开',open:true},
					               {id:11,pId:1,name:'父结点11--折叠'},
					               {id:111,pId:11,name:'叶子结点111'},
					               {id:112,pId:11,name:'叶子结点112'},
					               {id:113,pId:11,name:'叶子结点113'},
					               {id:114,pId:11,name:'百度一下',page:'http://www.baidu.com'}
					              ];
					//初始化ztree树
					$(function(){
					 	//初始化树
					 	$.fn.zTree.init($("#myTree2"), setting2, zNodes2);
				 	});
				</script>
				<ul id="myTree2" class="ztree"></ul>
			</div>
			<div title="面板三">
			<script>
				function addTabs(){
					//添加选项卡
					$("#tabs").tabs("add",{
						iconCls:'icon-save',
						closable:true,
						title:'百度一下',
						content:'<iframe frameborder="0" height="100%" width="100%" src="http://www.baidu.com"></iframe>'
					});
				}
			</script>
				<a onclick="addTabs();" id="baidulink" class="easyui-linkbutton">百度一下</a>
			</div>
		</div>
	</div>
	<div data-options="region:'east'" style="width:100px">东部区域</div>
	<div data-options="region:'center'">
		<!-- 选项卡 -->
		<div id="tabs" class="easyui-tabs" data-options="fit:true">
			<div data-options="closable:true,iconCls:'icon-add'" title="选项卡一">
				选项卡一内容
			</div>
			<div data-options="closable:true,iconCls:'icon-remove'" title="选项卡二">
				选项卡二内容
			</div>
			<div data-options="closable:true,iconCls:'icon-reload'" title="选项卡三">
				选项卡三内容
			</div>
		</div>
	</div>
	
</body>
</html>